<template>
  <div class="bg-white p-30px text-24px font-600 rounded-8px">视频教材</div>
  <div class="bg-white rounded-8px mt-10px">
    <div class="p-30px px-10px grid grid-cols-3">
        <block v-for="(item, index) in videoList" class=" " :key="index">
            <div class="px-10px linkText" @click="playVideo(item)">
                <el-image :src="item.video_thumb" fit="cover" class="w-300px h-160px rounded-5px" />
                <div class="text-center mt-5px mb-15px">{{ item.video_name }}</div>
            </div>
            
            
        </block>
    </div>
  </div>

  <el-dialog v-model="dialogVisible" :title="currentVideo.video_name" width="800" destroy-on-close>
    <video 
    controls 
    :src="currentVideo.video_url" 
    width="800"
    
  ></video>
  </el-dialog>
  
</template>

<script setup>
    import { ref,onMounted,computed,watch, nextTick } from 'vue'
    import { useRoute,useRouter } from 'vue-router'
    import { systemApi,userApi,httpApi } from '../../api/api'
    import { configStore } from '../../stores/config'
    import { Minus } from '@element-plus/icons-vue';
    import DOMPurify from 'dompurify';
    import { ElMessage } from 'element-plus';

    const lessonData = ref({});
    const videoList = ref([])
    const currentVideo = ref({})

    const dialogVisible = ref(false)

    const config = configStore()
    const init = async() => {
        lessonData.value = config.getBook()
        let res = await httpApi.getVideoList({book_id:lessonData.value.book_id})
        if(res.code){
            videoList.value = res.data
        }
        console.log(res)
    }

    const playVideo = (item) => {
        currentVideo.value = item
        dialogVisible.value = true

    }

    onMounted(() => {
        init()
    })

</script>